<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>滚动条宽度</title>
	</head>
	<body>
		<script>
			// 获取当前浏览器滚动条宽度：

			// P.S. 该代码应适用于任何 HTML 文档，而不依赖于其内容。
			// 为了获得滚动条的宽度，我们可以创建一个带有滚动条的元素，但是没有边框（border）和内边距（padding）。
			// 然后，它的全宽度 offsetWidth 和内部内容宽度 clientWidth 之间的差值就是滚动条的宽度。

			let div = document.createElement('div')

			div.style.overflowY = 'scroll'
			div.style.width = '50px'
			div.style.height = '50px'

			document.body.append(div)

			let scrollWidth = div.offsetWidth - div.clientWidth // 全宽度 - 内容宽度 = 滚动条宽度
			console.log(scrollWidth) // 17（谷歌浏览器）
		</script>
	</body>
</html>
